<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:composition template="/layout/masterPageNotHeaderSearch.xhtml">

        <f:metadata>
            <f:event type="preRenderView" listener="#{c_DangTinController.onPageLoad_ChiTietTinNhan()}">
            </f:event>
        </f:metadata>
        <ui:define name="ui-header">
            <title>#{utilsController.getLanguages("ChiTietTinDang")}</title>
        </ui:define>
        <ui:define name="ui-content">
            <link href="/resourcesApp/plugins/brand-buttons/brand-buttons.css" rel="stylesheet"/>
            <style>
                .list-inline > li{
                    padding-right: 0px;
                    padding-left: 0px;
                }
                .list-inline a.fa-fixed{
                    padding:2px 5px;
                }
                small{
                    font-size: 95%;
                }
                .slideItem .overlay {
                    background: none repeat scroll 0 0 rgba(204, 204, 204, 0.78);
                    color: #666;
                    display: block;
                    font-size: 15px;
                    height: 100%;
                    left: 0;
                    line-height: 19px;
                    position: absolute;
                    right: 0;
                    text-align: center;
                    text-transform: uppercase;
                    top: 0;
                    width: 100%;
                    z-index: 10;
                }
                .overlay div {
                    display: table;
                    height: 100%;
                    width: 100%;
                }
                .slideItem .overlay span {
                    text-align: center;
                    vertical-align: middle;
                    display: table-cell;
                }
                .prev {
                    background: url("/resourcesApp/img/sprite.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                    height: 73px;
                    left: 14px;
                    overflow: hidden;
                    position: absolute;
                    text-indent: -9999px;
                    top: 43%;
                    width: 31px;
                    z-index: 16;
                }
                .next {
                    background: url("/resourcesApp/img/sprite.png") no-repeat scroll -56px 0 rgba(0, 0, 0, 0);
                    height: 73px;
                    right:  14px;
                    overflow: hidden;
                    position: absolute;
                    text-indent: -9999px;
                    top: 43%;
                    width: 31px;
                    z-index: 16;
                }
            </style>
            <div class="container content">
                <div class="col-md-12">
                    <h2 class="headerColor" style="font-size: 30px">
                        #{c_DangTinController.item.namSanXuat} #{c_DangTinController.item.hangSX} #{c_DangTinController.item.doiXe}  #{c_DangTinController.item.dongXe}
                    </h2>

                    <ul class="list-inline">
                        <li><small>#{utilsController.parseDate(c_DangTinController.item.ngayHieuLuc, "EEE, dd-MM-yyyy h:mm a")}</small>  | </li>
                        <li><a class="btn btn-xs btn-facebook fa-fixed rounded-custom-def"
                               onclick="shareFacebook('#{c_DangTinController.item.namSanXuat} #{c_DangTinController.item.hangSX} #{c_DangTinController.item.doiXe}  #{c_DangTinController.item.dongXe}', '', '#{utilsController.fullDomain}/detail.html?id=#{c_DangTinController.item.ID}', '#{utilsController.fullDomain}#{utilsController.getGetURLUserUploadFile()}/SystemLogImg/#{c_DangTinController.item.getHinhAnh()}');">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li><a class="btn btn-xs btn-googleplus fa-fixed rounded-custom-def" 
                               onclick="shareGooglePlus('#{utilsController.fullDomain}/detail.html?id=#{c_DangTinController.item.ID}', '#{c_DangTinController.item.namSanXuat} #{c_DangTinController.item.hangSX} #{c_DangTinController.item.doiXe}  #{c_DangTinController.item.dongXe}');">
                                <i class="fa fa-google-plus"></i>
                            </a></li>
                        <li>
                            <a  class="btn btn-xs btn-twitter fa-fixed rounded-custom-def"
                                onclick="shareTwitter('#{c_DangTinController.item.namSanXuat} #{c_DangTinController.item.hangSX} #{c_DangTinController.item.doiXe}  #{c_DangTinController.item.dongXe}', '#{utilsController.fullDomain}/detail.html?id=#{c_DangTinController.item.ID}');">
                                <i class="fa fa-twitter"></i></a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-12">
                    <div class="row" >
                        <div class="col-md-9 imgView" style="margin-bottom: 10px;">
                            <img src="#{utilsController.getGetURLUserUploadFile()}/#{c_DangTinController.item.userID}/#{c_DangTinController.item.hinhAnh.get(0).hinhAnh}" 
                                 alt="" style="width: 100%;max-height: 500px;"/>
                            <a class="prev" href="javascript:void(0)"
                               style="display: none;" id="PreviousButton">previous
                            </a>
                            <a href="javascript:void(0)" class="next" 
                               style="display: none;" id="NextButton">next</a>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <c:forEach items="#{c_DangTinController.item.hinhAnh}" var="item" varStatus="st">
                                <c:if test="#{(st.index)%5==0}">
                                    <c:if test="#{st.index!=0}">
                                        <div style="clear:both;margin-bottom: 10px;"></div>
                                    </c:if>
                                </c:if>
                                <c:if test="#{st.index==0}">
                                    <div class="col-md-2 slideItem slideActive" style="position: relative;padding-left: 0px;padding-right: 3px;width: 20%">
                                        <a href="javascript:void(0)">
                                            <img src="#{utilsController.getGetURLUserUploadFile()}/#{c_DangTinController.item.userID}/#{item.hinhAnh}"
                                                 style="width: 100%;border: 1px solid #dddddd;height: 95px;"/>
                                        </a>
                                        <div class="overlay"><div><span>Viewing</span></div></div>
                                    </div>
                                </c:if>
                                <c:if test="#{st.index!=c_DangTinController.item.hinhAnh.size()-1 and st.index!=0}">
                                    <div class="col-md-2 slideItem" style="position: relative;padding-left: 3px;padding-right: 3px;width: 20%">
                                        <a href="javascript:void(0)">
                                            <img src="#{utilsController.getGetURLUserUploadFile()}/#{c_DangTinController.item.userID}/#{item.hinhAnh}"
                                                 style="width: 100%;border: 1px solid #dddddd;height: 95px;"/>
                                        </a>
                                    </div>
                                </c:if>
                                <c:if test="#{st.index==c_DangTinController.item.hinhAnh.size()-1}">
                                    <div class="col-md-2 slideItem" style="position: relative;padding-left: 3px;padding-right: 0px;width: 20%">
                                        <a href="javascript:void(0)">
                                            <img src="#{utilsController.getGetURLUserUploadFile()}/#{c_DangTinController.item.userID}/#{item.hinhAnh}"
                                                 style="width: 100%;border: 1px solid #dddddd;height: 95px;"/>
                                        </a>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                </div>

                <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr class="devider devider-dotted"/></div>
                <div class="row">
                    <div class="col-md-9">
                        <h2 style="font-size: 28px;padding-left: 15px;" class="headerColor">#{utilsController.getLanguages("ThongTinCoBan")}</h2>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("NamSanXuat")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.namSanXuat}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("SoVIN")} :  </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.soVIN}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("HangXe")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.hangSX}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("SoKMDaDi")} :  </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.soDaDiKM} KM</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("DoiXe")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.doiXe}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("MauXe")} :  </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.mauXe}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("PhanHangDoiXe")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.phanHangDoiXe}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("MauNoiThat")} :  </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.mauNoiThat}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("DongXe")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.dongXe}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("HopSo")} :  </label>
                                        <c:choose>
                                            <c:when test="#{c_DangTinController.item.hopSo==1}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("SoTay")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.hopSo==2}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("TuDong")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.hopSo==3}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("BanTuDong")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.hopSo==4}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("SoHonHop")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.hopSo==0}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("Khac")}</span>
                                            </c:when>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("SoCua")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.soCua}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("KieuDanDong")} :  </label>
                                        <c:choose>
                                            <c:when test="#{c_DangTinController.item.kieuDanDong==1}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("FWD")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.kieuDanDong==2}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("RFD")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.kieuDanDong==3}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("4WD")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.kieuDanDong==4}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("AWD")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.kieuDanDong==5}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("4WDHoacAWD")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.kieuDanDong==0}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("KhongRo")}</span>
                                            </c:when>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("KieuDongCo")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.kieuDongCo}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("NhienLieu")} :  </label>
                                        <c:choose>
                                            <c:when test="#{c_DangTinController.item.nhienLieu==1}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("Xang")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.nhienLieu==2}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("Dau")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.nhienLieu==3}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("XeChayDien")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.nhienLieu==4}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("Hydrid")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.nhienLieu==5}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("Diesel")}</span>
                                            </c:when>
                                            <c:when test="#{c_DangTinController.item.nhienLieu==0}">
                                                <span  style="font-size: 14px;"> #{utilsController.getLanguages("Khac")}</span>
                                            </c:when>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                        <div class="col-md-12 row-detail-new">
                            <h2 class="headerColor" style="font-size: 28px;font-weight: normal;">
                                #{utilsController.getLanguages("NoiDangTin")}
                            </h2>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboNamSanXuat">#{utilsController.getLanguages("QuocGia")} : </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.tenQG}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label for="cboXuatXuID">#{utilsController.getLanguages("Tinh")} :  </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.tenTinh}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                      
                            <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                            <h2 class="headerColor" style="font-size: 28px;font-weight: normal;padding-left: 15px;">
                                #{utilsController.getLanguages("ChonCacTienNghi")}
                            </h2>
                            <c:set value="#{c_DangTinController.findAllThietBi()}" var="vThietBi"></c:set>
                            <div class="col-md-12">
                                <c:forEach items="#{vThietBi}" var="item" varStatus="status">
                                    <c:if test="#{item.getLoai()==2}">
                                        <div class="col-md-6">
                                            <h4 style="font-weight: bold;font-size: 17px;color: black">#{utilsController.getLanguages(item.getNhomThietBi())}</h4>
                                            <c:forEach items="#{item.getItems()}" var="child">
                                                <div class="col-md-12">
                                                    <input type="checkbox" name="checkIds" id="#{child.getID()}" checked="#{child.getCheckBox()}"  disabled="true"/>
                                                    <label>#{utilsController.getLanguages(child.getThietBi())}</label>
                                                </div>
                                            </c:forEach>
                                            <c:if test="#{(status.index+1)%2==0}">
                                                <div class="row" style="margin-bottom: 15px"></div>
                                            </c:if>
                                        </div>
                                    </c:if>
                                </c:forEach>
                            </div>
                            <div class="col-md-12">
                                <c:forEach items="#{vThietBi}" var="item" varStatus="status">
                                    <c:if test="#{item.getLoai()==1}">
                                        <c:if test="#{(status.index+1)!=3}">
                                            <div class="col-md-6">
                                                <h4 style="font-weight: bold;font-size: 17px;color: black">#{utilsController.getLanguages(item.getNhomThietBi())}</h4>
                                                <c:forEach items="#{item.getItems()}" var="child">
                                                    <div class="col-md-12">
                                                        <input type="checkbox" name="checkIds" id="#{child.getID()}" checked="#{child.getCheckBox()}" disabled="true"/>
                                                        <label>#{utilsController.getLanguages(child.getThietBi())}</label>
                                                    </div>
                                                </c:forEach>
                                                <c:if test="#{(status.index+1)%2==0}">
                                                    <div class="row" style="margin-bottom: 15px"></div>
                                                </c:if>
                                            </div>
                                        </c:if>
                                        <c:if test="#{(status.index+1)==3}">
                                            <div class="col-md-6" style="clear: both">
                                                <h4 style="font-weight: bold;font-size: 17px;color: black">#{utilsController.getLanguages(item.getNhomThietBi())}</h4>
                                                <c:forEach items="#{item.getItems()}" var="child">
                                                    <div class="col-md-12">
                                                        <input type="checkbox" name="checkIds" id="#{child.getID()}" checked="#{child.getCheckBox()}" disabled="true"/>
                                                        <label>#{utilsController.getLanguages(child.getThietBi())}</label>
                                                    </div>
                                                </c:forEach>
                                                <c:if test="#{(status.index+1)%2==0}">
                                                    <div class="row" style="margin-bottom: 15px"></div>
                                                </c:if>
                                            </div>
                                        </c:if>

                                    </c:if>
                                </c:forEach>
                            </div>
                      

                        <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                        <div class="col-md-12">
                            <h2 style="font-size: 28px" class="headerColor">#{utilsController.getLanguages("ThongTinMoTa")}</h2>
                            <textarea class="form-control no-resize" readonly="true" style="height: 200px;">#{c_DangTinController.item.moTat}</textarea>
                        </div>
                        <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                        <div class="col-md-12 row-detail-new">
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label>#{utilsController.getLanguages("GiaBan")} : </label>
                                        <span style="font-size: 14px;">#{utilsController.formatNumber(c_DangTinController.item.gia, '#,###.##')} #{c_DangTinController.item.tienTeID}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 item-new">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label>#{utilsController.getLanguages("LoaiGia")} :  </label>
                                        <span style="font-size: 14px;">#{c_DangTinController.item.loaiGia==0?utilsController.getLanguages("ThoaThuan"):utilsController.getLanguages("CoDinh")}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                        <div class="col-md-12">
                            <h2 style="font-size: 28px" class="headerColor">#{utilsController.getLanguages("ThongTinLienHe")}</h2>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="txtLienHe_Ho">#{utilsController.getLanguages("Ho")} <span style="color: red;">(*)</span></label>
                                        <input type="text" id="txtLienHe_Ho" readonly="true" class="form-control" value="#{c_DangTinController.item.lienHe_Ho.trim()}" />
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="txtLienHe_Ten">#{utilsController.getLanguages("Ten")} <span style="color: red;">(*)</span></label>
                                        <input type="text" id="txtLienHe_Ten" readonly="true" class="form-control" value="#{c_DangTinController.item.lienHe_Ten}" />
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="txtLienHe_Email">#{utilsController.getLanguages("Email")} <span style="color: red;">(*)</span></label>
                                        <input type="text" id="txtLienHe_Email" readonly="true" class="form-control" value="#{c_DangTinController.item.lienHe_Email}" />
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="txtLienHe_DienThoai">#{utilsController.getLanguages("DienThoai")} <span style="color: red;">(*)</span></label>
                                        <input type="text" id="txtLienHe_DienThoai" readonly="true" class="form-control" value="#{c_DangTinController.item.lienHe_DienThoai}" />
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                    <div class="col-md-12" style="padding-left: 30px">
                        <div style="vertical-align: top;display: inline-block;float: left">
                            <img src="/resourcesApp/img/comment-default-avatar.jpg" alt="" class="rounded-custom-def"/>
                        </div>
                        <div style="padding-left: 60px;display: block;position: relative">
                            <h:form class="sky-form" id="frm_CommentEditor" style="width: auto">
                                <fieldset style="padding: 0px;">
                                    <textarea style="height: 150px;" id="txtCommentText" class="form-control no-resize"></textarea>
                                </fieldset>
                                <footer style="background: #95a5a6;">
                                    <button type="button" onclick="Save_Comment_Click();" class="btn-u btn-u-dark rounded-custom-def" >
                                        <i class="glyphicon glyphicon-send" style="margin-right: 7px;margin-left: -2px;"></i>#{utilsController.getLanguages("Gui")}</button>
                                </footer>
                                <p:remoteCommand name="cmdSave_Comment" actionListener="#{c_DangTinController.cmdSaveComment_Click}"></p:remoteCommand>
                            </h:form>
                        </div>
                    </div>
                    <div style="margin-bottom: 0px" class="col-md-12 margin-bottom-40"><hr/></div>
                    <div class="col-md-12" style="padding-left: 30px">
                        <h2 style="font-size: 28px" class="headerColor">#{utilsController.getLanguages("CommentList")}</h2>
                        <c:set value="#{c_DangTinController.findAllComment()}" var="vListComment" scope="session"></c:set>                    
                        <table class="table table-striped">
                            <tbody>
                                <c:forEach items="#{vListComment}" var="item">
                                    <tr>
                                        <td>
                                            <div class="col-md-12" style="padding-left: 0px">
                                                <div style="vertical-align: top;display: inline-block;float: left">
                                                    <img src="http://cdn.tgdd.vn/profile/default-avatar-comment/4.png" alt="" class="rounded-custom-def"/>
                                                </div>
                                                <div style="padding-left: 60px;display: block;position: relative">
                                                    <div>
                                                        <p style="font-size: 20px;font-weight: bold;margin-bottom: 0px;">
                                                            #{item.getUserComment()}
                                                        </p>
                                                        <small style="font-size: 75%">#{utilsController.parseDate(item.getCommentDate(), "EEE, dd-MM-yyyy h:mm a")}</small>
                                                    </div>
                                                    <div style="padding-top: 5px;font-size: 14px;">
                                                        #{item.getCommentText()}
                                                    </div>

                                                </div>
                                            </div>


                                        </td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                                   // <![CDATA[
                                   var overlay = '<div class="overlay"><div><span>Viewing</span></div></div>';
                                   $('.slideItem a').on('click', function() {
                                       $(this).parent().parent().find('.slideActive').removeClass('slideActive');
                                       $(this).parent().addClass('slideActive');
                                       $(this).parent().parent().find('.overlay').remove();
                                       $(this).parent().append(overlay);
                                       var img = $(this).find('img');
                                       $('.imgView img').fadeOut(function() {
                                           $('.imgView img').attr('src', img.attr('src'));
                                       }).fadeIn('slow');

                                   });
                                   $('div.imgView').hover(function() {
                                       $(this).find('a').show();
                                   }, function() {
                                       $(this).find('a').hide();
                                   });
                                   $('.prev').on('click', function() {
                                       var currentElm = $('.slideActive');

                                       currentElm.parent().find('.overlay').remove();
                                       currentElm.removeClass('slideActive');
                                       var nextElm = currentElm.prev();
                                       if (nextElm.length <= 0) {
                                           var arr = currentElm.parent().children();
                                           nextElm = arr.get(arr.length - 1);
                                       }
                                       $(nextElm).addClass('slideActive');
                                       $(nextElm).append(overlay);
                                       var img = $(nextElm).find('img');
                                       $('.imgView img').fadeOut(function() {
                                           $('.imgView img').attr('src', img.attr('src'));
                                       }).fadeIn('slow');
                                   });
                                   $('.next').on('click', function() {
                                       var currentElm = $('.slideActive');

                                       currentElm.parent().find('.overlay').remove();
                                       currentElm.removeClass('slideActive');
                                       var nextElm = currentElm.next();

                                       if (nextElm.length <= 0) {
                                           nextElm = currentElm.parent().children().get(1);
                                       }
                                       $(nextElm).addClass('slideActive');
                                       $(nextElm).append(overlay);
                                       var img = $(nextElm).find('img');
                                       $('.imgView img').fadeOut(function() {
                                           $('.imgView img').attr('src', img.attr('src'));
                                       }).fadeIn('slow');
                                   });
                                   // ]]>
            </script>
        </ui:define>
    </ui:composition> 
</html>